<script setup lang="ts">
import myCaptcha from "@/composables/myCaptcha.ts";
const props = defineProps<{
    captcha_code:string
}>()
const {captcha,showCaptcha} = myCaptcha();
await showCaptcha();
const emit = defineEmits(['update:captcha_code','update:captcha_key']);
watch(captcha,()=>{
  emit('update:captcha_key',captcha.value?.key);
},{
  immediate:true
})
</script>

<template>
  <main class="captcha">
    <form-input
                :value="props.captcha_code"
                placeholder="请输入验证码"
                @input="emit('update:captcha_code',($event.target as HTMLInputElement).value)"
                v-clearError="'captcha_code'"
    />
    <img :src="captcha?.img" alt="验证码" @click="showCaptcha()">
  </main>
</template>

<style lang="scss" scoped>
  main.captcha{
    @apply flex items-center gap-2;
    img{
      @apply rounded cursor-pointer border border-slate-400;
    }
  }
</style>